<!--验证码-->
<template>
  <div class="app-container">

    <!--列表-->
    <div class="table-container flex-main">
      <div class="table-container-header">
        <table-toolbar :create="false" @refresh="handleFilter" @remove="removeRecord">
          <template slot="rightTool">
            <search v-model="listQuery.codeDevice" placeholder="请输入设备号" @search="handleFilter" />
            <export-drop-down class-name="smsCode" :list-query="listQuery" title="短信验证码" :async="true" />
          </template>
        </table-toolbar>
      </div>
      <el-table
        ref="multipleTable"
        :data="smsCodeList"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        stripe
        @selection-change="handleSelectionChange"
        @filter-change="handleFilterHandler"
        @row-click="handleRowClick"
        @sort-change="sortChange">
        <el-table-column type="selection" width="60" />
        <el-table-column align="center" prop="id" label="#" width="70">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="流水号" prop="referenceCode" sortable width="150" />
        <el-table-column label="设备号" prop="codeDevice" width="160" />
        <el-table-column
          column-key="isUsed"
          :filters="[{value: 0,text: '未使用'}, { value: 1, text: '已使用' }]"
          :filter-multiple="false"
          label="验证码"
          prop="code"
          width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.isUsed==1" class="color-default"><s>{{ scope.row.code }}</s></span>
            <span v-if="scope.row.isUsed==0 && scope.row.expiryTime<new Date().getTime()" class="color-danger"><s>{{ scope.row.code }}</s></span>
            <span v-if="scope.row.isUsed==0 && scope.row.expiryTime>=new Date().getTime()" class="color-primary">{{ scope.row.code }}</span>
          </template>
        </el-table-column>
        <el-table-column
          column-key="type"
          :filters="[{value: 0,text: '短信验证码'}, { value: 1, text: '邮箱验证码' }]"
          :filter-multiple="false"
          align="center"
          prop="type"
          label="类型"
          width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type==1" type="success">邮箱验证码</el-tag>
            <el-tag v-if="scope.row.type==0" type="primary">短信验证码</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expiryTime" label="有效期至" min-width="260">
          <template slot-scope="scope">
            {{ scope.row.gmtCreated | formatDate(T.DATE_TIME_FMT) }}&nbsp;~&nbsp;
            <span v-if="scope.row.isUsed==0 && scope.row.expiryTime>=new Date().getTime()">{{ scope.row.expiryTime | formatDate(T.DATE_TIME_FMT) }}</span>
            <span v-if="scope.row.isUsed==1">{{ scope.row.expiryTime | formatDate(T.DATE_TIME_FMT) }}</span>
            <span v-if="scope.row.isUsed==0 && scope.row.expiryTime<new Date().getTime()" class="color-danger ">{{ scope.row.expiryTime | formatDate(T.DATE_TIME_FMT) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="90">
          <template slot-scope="scope">
            <button-option icon="el-icon-delete" skin="danger" title="删除" @click="handleRemoveSingle(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination_handler">
      <pagination v-show="smsCodeTotal>0" :total="smsCodeTotal" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>
  </div>
</template>

<script>
export default {
  components: { },
  data() {
    return {
      smsCodeList: [],
      smsCodeTotal: 0,
      multipleSelectionRecords: [],
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        codeDevice: '',
        sort: this.common.SORT_DEFAULT
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /**
     * 搜索
     */
    handleFilter() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.fetchData()
    },
    /**
     * 重置
     */
    handleReset() {
      this.listQuery = {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT,
        codeDevice: ''
      }
      this.$refs.multipleTable.clearSort()
      this.$refs.multipleTable.clearFilter()
      this.fetchData()
    },
    async fetchData() {
      const response = await this.$store.dispatch('smsCodePage', this.listQuery)
      this.smsCodeList = response.records
      this.smsCodeTotal = response.total
    },

    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**
     * 表格行过滤
     */
    handleFilterHandler(filters) {
      if (filters.isUsed) {
        this.listQuery.isUsed = filters.isUsed.join(',')
      }
      if (filters.type) {
        this.listQuery.type = filters.type.join(',')
      }
      this.handleFilter()
    },
    /**
     * 排序规则
     */
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    /**
     * 全选
     */
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },

    // 单个删除
    handleRemoveSingle(row) {
      this.multipleSelectionRecords = []
      this.multipleSelectionRecords.push(row)
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.removeRecord()
    },
    /**
     * 批量删除
     */
    removeRecord() {
      const $this = this
      if (this.multipleSelectionRecords.length > 0) {
        const ids = []
        $this.multipleSelectionRecords.forEach(function(v, i) {
          ids.push(v.id)
        })
        $this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $this.$store.dispatch('smsCodeRemove', ids).then(response => {
            $this.handleReset()
            $this.msgSuccess('删除成功')
          }).catch(() => {})
        }).catch(() => { })
      } else {
        $this.msgWarning('请选择要删除的记录')
      }
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
